<template>
  <a-drawer
    width="35%"
    :label-col="4"
    :wrapper-col="14"
    :visible="open"
    @close="onClose"
    :mask-closable="false"
  >
    <a-divider orientation="left">
      <b>新增spu信息</b>
    </a-divider>
    <a-form-model ref="form" :model="form" :rules="rules">
      <a-form-model-item
        label="spu名称"
        has-feedback
        :labelCol="{span: 5}"
        :wrapperCol="{span: 15}"
        prop="spuName"
      >
        <a-input placeholder="请填写spu名称" v-model="form.spuName" />
      </a-form-model-item>
      <a-form-model-item
        label="所属分类"
        has-feedback
        :labelCol="{span: 5}"
        :wrapperCol="{span: 15}"
        prop="categoryId"
      >
        <category-select ref="CategorySelect" @selectedCategory="getCategoryData" :categoryId="this.form.categoryId"/>
      </a-form-model-item>
      <a-form-model-item
        label="状态"
        has-feedback
        :labelCol="{span: 5}"
        :wrapperCol="{span: 15}"
        prop="spuStatus"
      >
        <a-select placeholder="请选择状态" style="width: 100%" allow-clear v-model="form.spuStatus">
          <a-select-option v-for="(d, index) in spuStatusOptions" :key="index" :value="d.dictValue">{{ d.dictLabel }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
    </a-form-model>
    <div v-if="this.form.categoryId">
      <a-divider orientation="left" >
        <b>SPU属性</b>
      </a-divider>
      <a-form-model-item
        v-for="attr in attrList"
        :label="attr.attrName"
        has-feedback
        :labelCol="{span: 5}"
        :wrapperCol="{span: 15}"
        :prop="attr.attrId"
      >
        <a-checkbox v-for="item in attr.valueList" :checked="attrValueChecked(item.attrValueId)" @change="selectAttrValue(attr.attrId,attr.attrName,item.attrValueId,item.attrValue)">{{ item.attrValue }}</a-checkbox>
      </a-form-model-item>
    </div>
    <div class="bottom-control">
      <a-space>
        <a-button type="primary" @click="submitForm">
          保存
        </a-button>
        <a-button type="dashed" @click="cancel">
          取消
        </a-button>
      </a-space>
    </div>
  </a-drawer>
</template>
<script>
import { getSpu, saveSpu, updateSpu } from '@/api/wms/base/spu'
import CategorySelect from '@/components/wms/categorySelect.vue'
import { listAttr } from '@/api/wms/base/attr'

export default {
  components: { CategorySelect },
  props: {},
  data () {
    return {
      open: false,
      // 状态
      spuStatusOptions: [],
      // 属性
      attrList: [],
      // 所选spu属性列表
      spuAttrs: [],
      form: {
        spuName: undefined,
        categoryId: undefined,
        categoryCode: undefined,
        categoryName: undefined,
        categoryFullName: undefined,
        spuStatus: undefined,
        spuAttrs: []
      },
      rules: {
        spuName: [{ required: true, message: 'spu名称不能为空', trigger: 'blur' }],
        categoryId: [{ required: true, message: '所属分类', trigger: 'blur' }],
        spuStatus: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
      }
    }
  },
  watch: {},
  computed: {},
  methods: {
    rest () {
      this.form = {
        spuName: undefined,
        categoryId: undefined,
        categoryCode: undefined,
        categoryName: undefined,
        categoryFullName: undefined,
        spuStatus: undefined
      }
      this.spuAttrs = []
    },
    // 取消按钮
    cancel () {
      this.open = false
    },
    showForm (id) {
      this.open = true
      this.rest()
      if (id) {
        getSpu(id).then(res => {
          if (res.code === 200) {
            this.form = res.data
            this.spuAttrs = res.data.spuAttrs
            // 获取分类特征
            this.getCategoryAttr(this.form.categoryId)
          }
        })
      }
    },
    onClose () {
      this.open = false
    },
    submitForm () {
      this.form.spuAttrs = this.spuAttrs
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.form.spuId) {
            updateSpu(this.form).then(res => {
              if (res.code === 200) {
                this.$message.success(
                  '修改成功',
                  3
                )
                this.open = false
                this.$emit('ok')
              }
            })
          } else {
            saveSpu(this.form).then(res => {
              if (res.code === 200) {
                this.$message.success(
                  '添加成功',
                  3
                )
                this.open = false
                this.$emit('ok')
              }
            })
          }
        }
      })
    },
    // 选择分类
    getCategoryData (data) {
      this.form.categoryId = data.categoryId
      this.form.categoryCode = data.categoryCode
      this.form.categoryName = data.categoryName
      this.form.categoryFullName = data.categoryFullName
      this.getCategoryAttr(data.categoryId)
    },
    // 获取分类属性
    getCategoryAttr (categoryId) {
      // 加载属性特征
      listAttr({ 'categoryId': categoryId }).then(res => {
        if (res.code === 200) {
          this.attrList = res.data
        }
      })
    },
    // spu属性是否选中
    attrValueChecked (attrValueId) {
      if (this.spuAttrs.length === 0) {
        return false
      } else {
        const filter = this.spuAttrs.filter(e => e.attrValueId === attrValueId)
        if (filter !== undefined && filter.length > 0) {
          return true
        }
      }
    },
    // 选择属性值
    selectAttrValue (attrId, attrName, attrValueId, attrValue) {
      let index = -1
      for (let i = 0; i < this.spuAttrs.length; i++) {
        if (this.spuAttrs[i].attrValueId === attrValueId) {
          index = i
        }
      }
      if (index === -1) {
        // spu属性
        this.spuAttrs.push({
          attrId: attrId,
          attrName: attrName,
          attrValueId: attrValueId,
          attrValue: attrValue
        })
      } else {
        this.spuAttrs.splice(index, 1)
      }
    }
  },
  created () {
    this.getDicts('status').then(response => {
      this.spuStatusOptions = response.data
    })
  },
  mounted () {
  }
}
</script>,
